<template>
  <el-input v-if="auth === 'edit'" v-model="model" :class="getClass"
            :placeholder="placeholder" @blur="fieldValueChange"/>

  <el-input v-else-if="auth === 'browse'" v-model="model" disabled
            @blur="fieldValueChange"/>

  <el-input v-else-if="auth === 'hide'" v-model="model" disabled
            type="password" @blur="fieldValueChange"/>

  <el-text truncated v-else-if="auth === 'static'">
    {{ model }}
  </el-text>
</template>
<script>
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {handleLikeParam, isEmpty} from '@/utils/CommonUtils';

export default {
  name: 'TextInput',
  props: {
    auth: {
      type: String,
      default: 'edit' //browse, hide, edit
    },
    notNull: {
      type: String,
      default: '0' //0表示非必填, 1表示必填
    },
    value: {
      type: String,
      default: undefined
    },
    field: {
      type: Object,
      default() {
        return DefaultFieldDefinition;
      }
    }
  },
  data() {
    return {
      model: undefined
    };
  },
  methods: {
    getSearchFieldValue(searchData) {
      if (isEmpty(this.model)) return;
      searchData.like.push({
        fieldName: this.field.tableFieldName,
        value: handleLikeParam(this.model)
      });
    },
    getFieldValue(rowData) {
      return this.model;
    },
    getFieldValueWithCheck(rowData) {
      if (this.notNull + '' === '1' && isEmpty(this.model)) {
        throw new Error('请将必填项填写完整');
      }
      return this.model;
    },
    resetField() {
      this.model = undefined;
    },
    setFieldValue(model) {
      this.model = model;
    },
    fieldValueChange() {
      this.$emit('fieldValueChange', this.field);
    },
    getFieldValueText() {
      return this.model;
    },
  },
  computed: {
    placeholder() {
      if (isEmpty(this.field.id)) return '';
      return `请输入${this.field.alias ? this.field.alias : this.field.showName}`;
    },
    getClass() {
      return {
        notNull: this.notNull === '1' && isEmpty(this.model)
      };
    },
  }
};
</script>

<style>
.notNull .el-input__wrapper {
  background: #fff9de;
}
</style>
